<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="imgItem in imgList" :key="imgItem.name">
      <img :src="imgItem.src" />
    </el-carousel-item>
  </el-carousel>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
export default defineComponent({
  name: 'Carousel',
  setup() {
    const imgList = [
      {
        name: 'logo',
        src: require('@/assets/img/c-1.jpg'),
        title: '这是logo.png',
      },
      {
        name: 'line-red.',
        src: require('@/assets/img/line-red.png'),
        title: '这是line-red.png',
      },
      {
        name: 'line-blue',
        src: require('@/assets/img/line-blue.png'),
        title: '这是line-blue.png',
      },
      {
        name: 'plane',
        src: require('@/assets/img/plane.png'),
        title: '这是plane',
      },
    ];
    return { imgList };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
.el-carousel--horizontal {
  width: 60%;
}
</style>
